import React from 'react';
import Grid from '@mui/material/Grid2';
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useLocation } from 'react-router-dom'
import Button from '@mui/material/Button';
import { Select } from 'antd';
import { Link } from 'react-router-dom'
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import MUILink from '@mui/material/Link';
import { putJobCategory, putPlayIndex, putPlayList } from '../redux/reducers'
import { setPlayIndex, updateJobCategory } from '../redux/actions'
import { GROUP_HAS_TARGET, GROUP_FIRST_ROUND } from '../contants'

const { Option } = Select;

function FunctionLevelPage(props) {
  const dispatch = useDispatch()
  const location = useLocation();
  const playList = useSelector(state => state.job.playList)
  const playIndex = useSelector(state => state.job.playIndex)
  const detailData = playList[playIndex];

  const handleLevelChange = (e, value) => {
    dispatch(putPlayList(playList.map((item, i) => {
      if (i == playIndex) {
        return {...item,
            weight: value
          }
      } else {
        return item
      }
    })))


    window.electronAPI.updateJobCategory({
      lid: detailData.lid,
      params: {
        weight: value
      }
    }, () => {})
    // if (playIndex < playList.length - 1) {
    //   setTimeout(() => {
    //     dispatch(putPlayIndex(playIndex + 1))
    //   }, 1000)
      
    // }
  }

  if (!detailData) {
    return <div>jobDetailFunction</div>
  }

  function handleClick(event) {
    // event.preventDefault();
    console.info('You clicked a breadcrumb.');
  }

  return (
    <div>
      <div role="presentation" onClick={handleClick}>
        <Breadcrumbs aria-label="breadcrumb">
          <MUILink underline="hover" color="inherit" href="/">
            职位列表
          </MUILink>
          <MUILink
            underline="hover"
            color="inherit"
            href="/jobList/firstRound"
          >
            已处理
          </MUILink>
          <Typography sx={{ color: 'text.primary' }}>标记等级</Typography>
        </Breadcrumbs>
      </div>
      <div style={{
        height: '100px',
        lineHeight: '100px',
        background:'#3b526a',
        'fontSize': '28px',
        'fontWeight': 600,
        color: '#fff',
        paddingLeft: '30px'
      }}>{detailData.brandName} | {detailData.jobName} <span style={{color: '#f26d49'}}>{detailData.salaryDesc}</span></div>
      <div>{location.pathname}</div>
      <Grid container spacing={2}>
        <Grid size={9}>
          <div className="content" style={{ background: 'white', height: '480px', marginTop: '15px', borderRadius: 10, padding: "20px 30px" }}>
            <div style={{ paddingBottom: '20px', fontSize: '22px', fontWeight: 'bold' }}>职位描述：</div>
            { detailData && detailData['detail'] && <div>{detailData['detail'].split('\n').map((text) => <div>{text}</div>)}</div> }
          </div>
          <div className="bottom" style={{ background: 'white',  marginTop: '15px' }}>
            <Grid container style={{height: '100px',}}>
              <Grid size={12}>
                <Grid container>
                  <Grid size={12}>
                  <Button
                    variant="contained"
                    disabled={playIndex == 0}
                    onClick={() => {
                      console.log('22222 next')
                      dispatch(putPlayIndex(playIndex - 1))
                    }}
                    style={{
                      backgroundColor: '#00bebd', color: '#fff', height: '100%', position: 'relative',
                      fontSize: '28px',
                      fontWeight: 800,
                      textAlign: 'center',
                      height: '100px',
                      lineHeight: '100px',
                      cursor: 'pointer',
                      color: '#fff', 
                      marginRight: '20px'
                    }}
                    >上一个</Button>
                    <ToggleButtonGroup
                      color="primary"
                      value={detailData.weight}
                      exclusive
                      onChange={handleLevelChange}
                      aria-label="Platform"
                    >
                      <ToggleButton value="100" style={{background: '#607d8b'}}>1-垃圾（C级）</ToggleButton>
                      <ToggleButton value="200" style={{background: '#795548'}}>2-较差（C级）</ToggleButton>
                      <ToggleButton value="300" style={{background: '#4caf50'}}>3-可以（C级）</ToggleButton>
                      <ToggleButton value="400" style={{background: '#ffc107'}}>4-满意（B级）</ToggleButton>
                      <ToggleButton value="500" style={{background: '#ff5722'}}>5-理想（A-S级）</ToggleButton>
                    </ToggleButtonGroup> 
                    <Button
                  variant="contained"
                  disabled={playIndex == playList.length - 1}
                  onClick={() => {
                    console.log('22222 next')
                    dispatch(putPlayIndex(playIndex + 1))
                  }}
                  style={{
                    backgroundColor: '#00bebd', color: '#fff', height: '100%', position: 'relative',
                    fontSize: '28px',
                    fontWeight: 800,
                    textAlign: 'center',
                    height: '100px',
                    lineHeight: '100px',
                    cursor: 'pointer',
                    color: '#fff',
                    marginLeft: '20px'
                }}
                >下一个</Button>

                  </Grid>
                </Grid>


               
              </Grid>
            </Grid>
          </div>
        </Grid>
        <Grid  size={3} style={{ background: 'white' }}>
   
        </Grid>
      </Grid>
    </div>
)

}

export default FunctionLevelPage
